<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <table border="1">
      <tr>
        <th>
          <!-- change ?
               click ?
          -->
          <input type="checkbox" v-model="checkAll" @change="changeAll">
        </th>
        <th>商品id</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>操作</th>
        <th>小计</th>
      </tr>
      <tr v-for="item of cartData" :key="item.id">
        <td>
          <input type="checkbox" :value="item.id" v-model="arr" @change="changeSingle">
        </td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button>-</button>
          {{ item.num }}
          <button>+</button>
          <button>X</button>
        </td>
        <td>
          {{ item.num * item.price}}
        </td>
      </tr>
    </table>
    {{ arr }}
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      cartData: [
        {id:1,name:'苹果',num:1,price:100}, 
        {id:2,name:'小米',num:1,price:200}, 
        {id:3,name:'华为',num:1,price:300}
      ],
      arr: [],
      checkAll: false
    },
    methods: {
      changeAll () {
        if (this.checkAll) { // 全选选中
          this.cartData.forEach(item => {
            this.arr.push(item.id)
          })
        } else { // 全选未选中
          this.arr = []
        }
      },
      changeSingle () {
        // 选中的数据的长度和源数据的长度相等，表示全选
        this.checkAll = this.arr.length === this.cartData.length
      }
    }
  })
</script>
</html>